<app-input-filter placeholder="Search..." [filters]="searchFilters" (changeFilter)="searchChange($event)"
	[suggestions]="searchSuggestions" [suggestionTemplate]="suggestionTemplate"
	(selectSuggestion)="selectSuggestion($event)" (submit)="submitSearch()" #searchBar>
	<ng-template #suggestionTemplate let-option="option">
		<a [routerLink]="option.data.defaultLink.path" [queryParams]="option.data.defaultLink.params"
			class="navbar-suggestion" (click)="clickSuggestion()">
			<div class="title">
				<span class="label">{{option.data.result.label}}</span>
				<span class="id">{{option.data.result.id}}</span>
			</div>
			<div [ngSwitch]="option.data.result.type">
				<nz-tag *ngSwitchCase="'project'" nzColor="blue">{{option.data.result.type}}</nz-tag>
				<nz-tag *ngSwitchCase="'workflow'" nzColor="green">{{option.data.result.type}}</nz-tag>
				<nz-tag *ngSwitchDefault>{{option.data.result.type}}</nz-tag>
			</div>
		</a>
	</ng-template>
</app-input-filter>